<template>
  <div class="capacitymanagement_box" ref="capacitymanagement">
    <!-- 头部搜索部分 -->
    <div class="orderHeader">
      <div class="orderSearch">
        <el-form ref="form" :model="orderSearch" :inline="true">
          <el-row :gutter="24">
            <el-col :span="5">
              <el-form-item label="承运商" size="mini">
                <el-select
                  v-model="orderSearch.Carrier"
                  placeholder="请选择承运商"
                >
                  <el-option
                    v-for="item in companyData"
                    :label="item.name"
                    :value="item.id + ''"
                    :key="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="出发地" size="mini">
                <el-select
                  v-model="orderSearch.placedeparture"
                  placeholder="请选择出发地"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="Pageregionbox"
                >
                  <el-option
                    v-for="item in regionboxList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="目的地" size="mini">
                <el-select
                  v-model="orderSearch.destination"
                  placeholder="请选择目的地"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="Pageregionbox"
                >
                  <el-option
                    v-for="item in regionboxList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="节点类型" size="mini">
                <el-select
                  v-model="orderSearch.getType"
                  placeholder="请选择类型"
                  @change="changeClickFn"
                >
                  <el-option
                    v-for="(item, index) in OpitonsData"
                    :key="index"
                    :value="item.item_code"
                    :label="item.item_name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="CarrierUtilListFn(1, 10)"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-left" @click="resultClickFn"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div
      class="actions"
      style="margin-bottom: 10px; height: 30px; margin-top: 20px"
    >
      <div class="left">
        <el-button
          style="margin-right: 10px"
          type="primary"
          plain
          size="mini"
          @click="AddGPSClickFn"
          ><i class="el-icon-plus"></i> 线路新增</el-button
        >
        <!-- <el-button
          style="margin-right: 10px"
          type="primary"
          plain
          size="mini"
          @click="BatchimportClickFn"
          ><i class="el-icon-upload2"></i> 线路导入</el-button
        >
        <el-button
          style="margin-right: 10px"
          type="primary"
          plain
          size="mini"
          @click="BatchexportClickFn"
          class="improtOut"
          ><i class="el-icon-download"></i>
          <a :href="reqUrl">线路导出</a></el-button
        > -->
        <el-button
          style="margin-right: 10px"
          type="primary"
          plain
          size="mini"
          @click="BatchenableClickFn"
          ><i class="el-icon-success"></i> 批量启用</el-button
        >
        <el-button
          style="margin-right: 10px"
          type="primary"
          plain
          size="mini"
          @click="BatchdisableClickFn"
          ><i class="el-icon-error"></i> 批量禁用</el-button
        >
        <el-button
          style="margin-right: 10px"
          type="primary"
          plain
          size="mini"
          @click="DeleteClickFn"
          ><i class="el-icon-delete-solid"></i> 批量删除</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          small
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div v-if="!flagShow">
      <el-table
        ref="multipleTable"
        :max-height="maxheight"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column property="id" label="线路ID" width="120">
          <template slot-scope="scope">
            <span>{{ "L00" + scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column property="node_type" label="类型" width="220">
          <template slot-scope="scope">
            {{
              scope.row.node_type === "1"
                ? "揽收"
                : scope.row.node_type === "3"
                ? "干线"
                : scope.row.node_type === "4"
                ? "配送"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column property="from_region" label="始发地" width="280">
        </el-table-column>
        <el-table-column property="to_region" label="目的地" width="280">
        </el-table-column>
        <el-table-column property="carrier_name" label="承运商" width="220">
        </el-table-column>
        <el-table-column property="price_type" label="单位" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.price_type === "0" ? "件数" : "重量" }}</span>
          </template>
        </el-table-column>
        <el-table-column property="unit_price" label="报价" width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.price_type === "0"
                ? scope.row.unit_price / 1 + "元/件"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="first_measure" label="首重" width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.price_type === "1"
                ? scope.row.first_measure / 1 + "kg"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="based_on_price" label="首价" width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.price_type === "1"
                ? scope.row.based_on_price / 1 + "元/kg"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="further_price" label="续价" width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.price_type === "1"
                ? scope.row.further_price / 1 + "元/kg"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="valid_time" label="时效" width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.valid_time
                ? (scope.row.valid_time / 60).toFixed(2) + "（H）"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="tax_number" label="税点" width="100">
        </el-table-column>
        <el-table-column property="is_insurance" label="保险" width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.is_insurance === "0" ? "无保险" : "有保险"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="is_enable" label="启用状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.is_enable === "0" ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column property="create_time" label="创建时间" width="180">
          <template slot-scope="scope">
            <span>{{
              scope.row.create_time
                ? new Date(
                    Number(scope.row.create_time) * 1000
                  ).toLocaleString()
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="disable_reason" label="禁用原因" width="320">
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="DetailClickFn(scope.row)"
              >详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="EditClickFn(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteClickFn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      style="
        width: 100%;
        min-height: 150px;
        text-align: center;
        border: 1px solid #f8f8f8;
      "
      v-else
    >
      <span style="display: block; line-height: 60px">暂无数据</span>
      <el-button size="mini" type="primary" @click="ApplyadditionLineClickFn"
        >可申请添加路线</el-button
      >
    </div>
    <el-dialog
      title="线路新增"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="36.5%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="类型" prop="getType">
          <el-select
            v-model="ruleForm.getType"
            placeholder="请选择类型"
            @change="changeClickFn"
          >
            <el-option
              v-for="(item, index) in OpitonsData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运商" prop="Carrier">
          <el-select v-model="ruleForm.Carrier">
            <el-option
              v-for="item in companyData"
              :label="item.name"
              :value="item.id + ''"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <div v-if="selectFlagShow === true">
          <el-form-item label="出发地" prop="placedeparture">
            <el-select
              v-model="ruleForm.placedeparture"
              filterable
              remote
              reserve-keyword
              @change="placedepartureFn"
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-select
              v-model="ruleForm.destination"
              @change="destinationClickFn"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="地区范围" prop="Regionalscope">
            <el-select
              v-model="ruleForm.Regionalscope"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="时效" prop="prescription">
          <el-input v-model="ruleForm.prescription"></el-input>
        </el-form-item>
        <el-form-item label="税点" prop="Taxpoint">
          <el-input v-model="ruleForm.Taxpoint"></el-input>
        </el-form-item>
        <div style="width: 100%; float: left">
          <el-form-item label="应收" prop="offer" class="item_list">
            <el-select v-model="ruleForm.offer" @change="changeOfferClickFn">
              <el-option
                v-for="(item, index) in unitData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <div v-if="selectFlagOfferShow === true" class="danjia">
            <el-form-item label="单价" prop="pracenumber">
              <el-input v-model="ruleForm.pracenumber"></el-input>
            </el-form-item>
          </div>
          <div class="KG_box" v-else>
            <el-form-item label="首重" prop="firstmeasure">
              <el-input v-model="ruleForm.firstmeasure"></el-input>
            </el-form-item>
            <el-form-item label="首价" prop="Firstprice">
              <el-input v-model="ruleForm.Firstprice"></el-input>
            </el-form-item>
            <el-form-item label="续价" prop="Continuationprice">
              <el-input v-model="ruleForm.Continuationprice"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="保险" prop="Insurance" class="baoxian">
          <el-select v-model="ruleForm.Insurance">
            <el-option
              v-for="(item, index) in InsuranceData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="应付"
          prop="BillingID"
          v-if="selectFlagShow === true"
        >
          <el-select v-model="ruleForm.BillingID">
            <el-option
              v-for="(item, index) in BillingOpitonsData"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="线路详情"
      :visible.sync="dialogVisibleDetail"
      :close-on-click-modal="false"
      width="36.5%"
      :before-close="handleCloseDetail"
    >
      <el-form
        :model="ruleFormDetail"
        :rules="rulesDetail"
        ref="ruleFormDetail"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="getType">
          <el-select
            v-model="ruleFormDetail.getType"
            placeholder="请选择类型"
            @change="changeClickFn"
            disabled
          >
            <el-option
              v-for="(item, index) in OpitonsData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运商" prop="Carrier">
          <el-select v-model="ruleFormDetail.Carrier" disabled>
            <el-option
              v-for="item in companyData"
              :label="item.name"
              :value="item.id + ''"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <div v-if="selectFlagShow === true">
          <el-form-item label="出发地" prop="placedeparture">
            <el-select
              v-model="ruleFormDetail.placedeparture"
              disabled
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-select
              v-model="ruleFormDetail.destination"
              disabled
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="地区范围" prop="Regionalscope">
            <el-select
              v-model="ruleFormDetail.Regionalscope"
              disabled
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="时效" prop="prescription">
          <el-input v-model="ruleFormDetail.prescription" disabled></el-input>
        </el-form-item>
        <el-form-item label="税点" prop="Taxpoint">
          <el-input v-model="ruleFormDetail.Taxpoint" disabled></el-input>
        </el-form-item>
        <div style="width: 100%; float: left">
          <el-form-item label="应收" prop="offer" class="item_list">
            <el-select
              v-model="ruleFormDetail.offer"
              @change="changeOfferClickFn"
              disabled
            >
              <el-option
                v-for="(item, index) in unitData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <div v-if="selectFlagOfferShow === true" class="danjia">
            <el-form-item label="单价" prop="pracenumber">
              <el-input
                v-model="ruleFormDetail.pracenumber"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="KG_box" v-else>
            <el-form-item label="首重" prop="firstmeasure">
              <el-input
                v-model="ruleFormDetail.firstmeasure"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="首价" prop="Firstprice">
              <el-input v-model="ruleFormDetail.Firstprice" disabled></el-input>
            </el-form-item>
            <el-form-item label="续价" prop="Continuationprice">
              <el-input
                v-model="ruleFormDetail.Continuationprice"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="保险" prop="Insurance" class="baoxian">
          <el-select v-model="ruleFormDetail.Insurance" disabled>
            <el-option
              v-for="(item, index) in InsuranceData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应付" prop="BillingID">
          <el-select v-model="ruleFormDetail.BillingID" disabled>
            <el-option value="1">名称1</el-option>
            <el-option value="2">名称2</el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="线路编辑"
      :visible.sync="dialogVisibleEdit"
      :close-on-click-modal="false"
      width="36.5%"
      :before-close="handleCloseEdit"
    >
      <el-form
        :model="ruleFormEdit"
        :rules="rulesEdit"
        ref="ruleFormEdit"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="getType">
          <el-select
            v-model="ruleFormEdit.getType"
            placeholder="请选择类型"
            @change="changeClickFn"
          >
            <el-option
              v-for="(item, index) in OpitonsData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承运商" prop="Carrier">
          <el-select v-model="ruleFormEdit.Carrier">
            <el-option
              v-for="item in companyData"
              :label="item.name"
              :value="item.id + ''"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <div v-if="selectFlagShow === true">
          <el-form-item label="出发地" prop="placedeparture">
            <el-select
              v-model="ruleFormEdit.placedeparture"
              @change="placedepartureFn"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-select
              v-model="ruleFormEdit.destination"
              @change="destinationClickFn"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="地区范围" prop="Regionalscope">
            <el-select
              v-model="ruleFormEdit.Regionalscope"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="时效" prop="prescription">
          <el-input v-model="ruleFormEdit.prescription"></el-input>
        </el-form-item>
        <el-form-item label="税点" prop="Taxpoint">
          <el-input v-model="ruleFormEdit.Taxpoint"></el-input>
        </el-form-item>
        <div style="width: 100%; float: left">
          <el-form-item label="应收" prop="offer" class="item_list">
            <el-select
              v-model="ruleFormEdit.offer"
              @change="changeOfferClickFn"
            >
              <el-option
                v-for="(item, index) in unitData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <div v-if="selectFlagOfferShow === true" class="danjia">
            <el-form-item label="单价" prop="pracenumber">
              <el-input v-model="ruleFormEdit.pracenumber"></el-input>
            </el-form-item>
          </div>
          <div class="KG_box" v-else>
            <el-form-item label="首重" prop="firstmeasure">
              <el-input v-model="ruleFormEdit.firstmeasure"></el-input>
            </el-form-item>
            <el-form-item label="首价" prop="Firstprice">
              <el-input v-model="ruleFormEdit.Firstprice"></el-input>
            </el-form-item>
            <el-form-item label="续价" prop="Continuationprice">
              <el-input v-model="ruleFormEdit.Continuationprice"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="保险" prop="Insurance" class="baoxian">
          <el-select v-model="ruleFormEdit.Insurance">
            <el-option
              v-for="(item, index) in InsuranceData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应付" prop="BillingID">
          <el-select v-model="ruleForm.BillingID">
            <el-option value="1">名称1</el-option>
            <el-option value="2">名称2</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitFormEditClickFn('ruleFormEdit')"
            >立即保存</el-button
          >
          <el-button @click="resetForm('ruleFormEdit')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="线路禁用"
      :visible.sync="dialogVisibleDisable"
      :close-on-click-modal="false"
      width="35%"
      :before-close="handleCloseDisable"
    >
      <el-form
        :model="ruleFormDisable"
        :rules="rulesDisable"
        ref="ruleFormDisable"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="禁用原因" prop="Reasondisabling">
          <el-input
            type="textarea"
            v-model="ruleFormDisable.Reasondisabling"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormDisableClickFn"
            >立即保存</el-button
          >
          <el-button @click="dialogVisibleDisable = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="申请开通线路"
      :visible.sync="dialogVisibleLine"
      :close-on-click-modal="false"
      width="35%"
      :before-close="handleCloseLine"
    >
      <el-form
        :model="ruleFormLine"
        :rules="rulesLine"
        ref="ruleFormLine"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="getType">
          <el-select
            v-model="ruleFormLine.getType"
            placeholder="请选择类型"
            @change="changeClickFn"
          >
            <el-option
              v-for="(item, index) in OpitonsData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if="selectFlagShow === true">
          <el-form-item label="出发地" prop="placedeparture">
            <el-select
              v-model="ruleFormLine.placedeparture"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="destination">
            <el-select
              v-model="ruleFormLine.destination"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="地区范围" prop="Regionalscope">
            <el-select
              v-model="ruleFormLine.Regionalscope"
              filterable
              remote
              reserve-keyword
              :remote-method="Pageregionbox"
            >
              <el-option
                v-for="item in regionboxList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="handleAddLineClickFn"
            >保存</el-button
          >
          <el-button @click="dialogVisibleLine = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="线路导入"
      :visible.sync="dialogVisibleImport"
      :close-on-click-modal="false"
      width="35%"
      :before-close="handleCloseImport"
    >
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="120px"
        :model="ruleUploadForm"
        :rules="rulesUpload"
        ref="ruleUploadForm"
      >
        <div class="body_center">
          <div class="first_step">
            <div style="color: #378cbe">操作流程:</div>
            <div>
              <span>第一步:</span>
              <span>&nbsp;&nbsp;下载导入模板</span>
              <!-- <span style="padding-left: 10px" @click="innerDrawerTure()">
                <span class="el-icon-setting" style="color: #0097cf"></span>
                <span style="color: #0097cf; cursor: pointer">设置模板</span>
              </span> -->
            </div>
            <div>
              <span style="color: #ff9a00"> 需要导入操作,请先点击下载模板</span>
              <el-button
                type="primary"
                style="float: right"
                @click="DownloadClickFn"
                class="download_button"
              >
                <i class="el-icon-download"></i>
                <a :href="ApiurlHtml">下载模板</a>
              </el-button>
            </div>
          </div>
          <div class="second_step">
            <div>第二步:</div>
            <div>
              <span style="color: #ff9a00">
                文件不超过2M,建议先上传少量数据测试导入数据的有效性
              </span>
              <div
                style="float: right; text-align: right; padding-bottom: 15px"
              >
                <el-upload
                  class="upload-demo"
                  ref="add-upload"
                  action
                  multiple
                  :auto-upload="false"
                  :file-list="ruleUploadForm.business_license"
                  :on-change="
                    (file, fileList) => {
                      handleChange(file, fileList, 28);
                    }
                  "
                  :on-remove="
                    (file, fileList) => {
                      removeChange(file, fileList, 28);
                    }
                  "
                >
                  <el-button
                    slot="trigger"
                    type="primary"
                    size="mini"
                    icon="el-icon-upload2"
                    >上传文件</el-button
                  >
                </el-upload>
              </div>
            </div>
          </div>
          <div class="third_step">
            <div>
              <span>第三步:&nbsp;&nbsp;提交导入</span>
              <el-button
                type="primary"
                icon="el-icon-thumb"
                style="float: right"
                @click="submitUpload"
                :loading="loadingfalse"
                >提交导入</el-button
              >
            </div>
          </div>
          <div class="four_step">
            <div>第四步:&nbsp;&nbsp;在开通西安路列表中查询导入结果</div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  regionbox,
  CarrierUtilList,
  CarrierUtilCreate,
  CarrierUtilDetail,
  CarrierUtilDelete,
  CarrierUtilUpdate,
  CarrierUtilDisable,
  CarrierUtilEnable,
  CarrierUtilExport,
  ToOpenedCreate,
  BillingCalculateCost,
  CarrierUtilImport,
} from "@/api/transportationtools";
import { carrierBox } from "@/api/waybill";
import { reqDictionaryOptions } from "@/api/earlywarning";
import { getToken } from "@/utils/auth";
import { uploading } from "../material/common/common";
export default {
  name: "OrderHeader",
  data() {
    return {
      loadingfalse: false,
      dialogVisible: false,
      selectFlagShow: false,
      selectFlagOfferShow: false,
      dialogVisibleDetail: false,
      dialogVisibleEdit: false,
      dialogVisibleDisable: false,
      flagShow: false,
      dialogVisibleLine: false,
      dialogVisibleImport: false,
      reqUrl: "",
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      ruleFormLine: {
        getType: "1",
        placedeparture: "",
        destination: "",
        Regionalscope: "",
      },
      rulesLine: {},
      orderSearch: {
        Carrier: "",
        placedeparture: "",
        destination: "",
        getType: "",
      },
      ruleForm: {
        getType: "1",
        Carrier: "",
        placedeparture: "",
        destination: "",
        Regionalscope: "",
        prescription: "",
        Taxpoint: "",
        offer: "0",
        Insurance: "",
        BillingID: "",
        pracenumber: "",
        firstmeasure: "",
        Firstprice: "",
        Continuationprice: "",
      },
      rules: {},
      ruleFormDetail: {
        getType: "1",
        Carrier: "",
        placedeparture: "",
        destination: "",
        Regionalscope: "",
        prescription: "",
        Taxpoint: "",
        offer: "0",
        Insurance: "",
        BillingID: "",
        pracenumber: "",
        firstmeasure: "",
        Firstprice: "",
        Continuationprice: "",
      },
      rulesDetail: {},
      ruleFormEdit: {
        getType: "1",
        Carrier: "",
        placedeparture: "",
        destination: "",
        Regionalscope: "",
        prescription: "",
        Taxpoint: "",
        offer: "0",
        Insurance: "",
        BillingID: "",
        pracenumber: "",
        firstmeasure: "",
        Firstprice: "",
        Continuationprice: "",
      },
      rulesEdit: {},
      ruleFormDisable: {
        Reasondisabling: "",
      },
      rulesDisable: {},
      ruleUploadForm: {
        business_license: [],
      },
      rulesUpload: {},
      tableData: [],
      multipleSelection: [],
      orderIdNums: [],
      companyData: [],
      detailId: "",
      deleteId: [],
      OpitonsData: [],
      unitData: [],
      InsuranceData: [],
      regionboxList: [],
      BillingOpitonsData: [],
      placedepartureDataVal: "",
      destinationVal: "",
      ImportDataUrl: "",
      apiUrl: "oss.dushisc.com/5/1658813995029运力工具模板.xlsx",
      ApiurlHtml: "",
      maxheight: 400,
    };
  },
  mounted() {
    this.CarrierUtilListFn(this.pageNum, this.pageSize);
    this.changeClickFn("1");
    this.changeOfferClickFn("0");
    carrierBox().then((res) => {
      this.companyData = res.data;
    });
    this.SelectOpitonsFn();
    this.SelectOpitonsUnitFn();
    this.SelectOpitonsInsuranceFn();
  },
  methods: {
    placedepartureFn(val) {
      this.placedepartureDataVal = val;
      if (this.destinationVal !== "" && val) {
        this.BillingCalculateCostFn();
      } else {
        return false;
      }
    },

    destinationClickFn(val) {
      this.destinationVal = val;
      if (this.placedepartureDataVal !== "" && val) {
        this.BillingCalculateCostFn();
      } else {
        return false;
      }
    },
    //计费ID下拉API BillingCalculateCost
    BillingCalculateCostFn() {
      const data = {
        from_region_id:
          this.ruleForm.getType === "1" || this.ruleForm.getType === "4"
            ? this.ruleForm.Regionalscope.toString()
            : this.ruleForm.placedeparture.toString(),
        to_region_id:
          this.ruleForm.getType === "1" || this.ruleForm.getType === "4"
            ? ""
            : this.ruleForm.destination.toString(),
        transport_type: "-1",
        goods: [
          {
            price: "",
            name: "",
            number: "1",
            packing: "",
            volume: "",
            weight: "",
            unit: "",
          },
        ],
      };
      BillingCalculateCost(data).then((res) => {
        if (res.code === 10000 || res.data.list.quotation_way_list.length > 0) {
          this.BillingOpitonsData = res.data.list.quotation_way_list;
        }
      });
    },
    // 地址的模糊搜索
    Pageregionbox(query) {
      if (query !== "") {
        setTimeout(async () => {
          let result = await regionbox({
            name: query,
          });
          this.regionboxList = result.data;
        }, 200);
      } else {
      }
    },
    //申请添加线路按钮操作
    ApplyadditionLineClickFn() {
      this.dialogVisibleLine = true;
    },

    // 申请添加线路弹窗关闭
    handleCloseLine() {
      this.dialogVisibleLine = false;
    },
    //申请添加线路弹出框保存
    handleAddLineClickFn() {
      const data = {
        from_region_id:
          this.ruleFormLine.getType === "1" || this.ruleFormLine.getType === "4"
            ? this.ruleFormLine.Regionalscope.toString()
            : this.ruleFormLine.placedeparture.toString(),
        to_region_id:
          this.ruleFormLine.getType === "1" || this.ruleFormLine.getType === "4"
            ? ""
            : this.ruleFormLine.destination.toString(),
        node_type: this.ruleFormLine.getType,
      };
      ToOpenedCreate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "申请待开通路线成功",
            type: "success",
          });
          this.dialogVisibleLine = false;
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    // 获取下拉框数据
    SelectOpitonsFn() {
      const data = {
        dictionary_code: "gettype",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.OpitonsData = res.data.list;
        }
      });
    },
    //单位下拉
    SelectOpitonsUnitFn() {
      const data = {
        dictionary_code: "Tool_unit",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.unitData = res.data.list;
        }
      });
    },
    //保险下拉
    SelectOpitonsInsuranceFn() {
      const data = {
        dictionary_code: "Insurance",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.InsuranceData = res.data.list;
        }
      });
    },
    //筛选条件过滤重置按钮
    resultClickFn() {
      this.orderSearch.Carrier = "";
      this.orderSearch.placedeparture = "";
      this.orderSearch.destination = "";
      this.orderSearch.getType = "";
      this.CarrierUtilListFn(this.pageNum, this.pageSize);
    },
    //select的change事件
    changeClickFn(val) {
      let DataValue = val;
      if (DataValue === "3" || DataValue === "5") {
        this.selectFlagShow = true;
      } else {
        this.selectFlagShow = false;
      }
    },
    //报价select操作
    changeOfferClickFn(val) {
      let offerData = val;
      if (offerData === "0") {
        this.selectFlagOfferShow = true;
      } else {
        this.selectFlagOfferShow = false;
      }
    },
    //列表选中操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
        }
      } else {
        this.orderIdNums = [];
      }
    },
    //批量导入操作
    BatchimportClickFn() {
      this.dialogVisibleImport = true;
    },
    handleCloseImport() {
      this.dialogVisibleImport = false;
    },
    //下载模板
    DownloadClickFn() {
      this.ApiurlHtml = "http://" + this.apiUrl;
      let aDom = document.createElement("a");
      aDom.href = this.ApiurlHtml;
      aDom.click();
    },
    // 上传到oss上
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((result) => {
        var resname = result.name;
        this.ImportDataUrl = resname;
        var resType = resname.split("/")[0];
        var filehttp = "http://oss.dushisc.com/";
        //this.ImportDataUrl = filehttp + resname
        switch (resType) {
          case "28":
            this.ruleUploadForm.business_license.push({
              name: filehttp + result.name,
            });
            break;
        }
      });
    },
    // 删除调用
    removeChange(file, fileList, type) {
      switch (type) {
        case 28:
          if (this.ruleUploadForm.business_license.length > 0) {
            for (
              var i = 0;
              i < this.ruleUploadForm.business_license.length;
              i++
            ) {
              if (this.ruleUploadForm.business_license[i].uid == file.uid) {
                this.ruleUploadForm.business_license.splice(i, 1);
              }
            }
          }
          break;
      }
    },
    submitUpload() {
      this.loadingfalse = true;
      const data = {
        file_name: this.ImportDataUrl,
        header_id: "9",
      };
      CarrierUtilImport(data).then((res) => {
        if (res.code === 10000) {
          var msg = res.msg;
          this.ContentSuccess(msg);
          this.dialogVisibleImport = false;
          this.CarrierUtilListFn(this.pageNum, this.pageSize);
          // this.loadingfalse = false
        } else {
          var msg = res.msg;
          this.ContentSuccess(msg);
        }
      });
    },
    ContentSuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
      });
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    //批量导出操作
    BatchexportClickFn() {
      if (this.orderIdNums.length > 0) {
        const filtersData = [
          "from_region",
          "to_region",
          "carrier_name",
          "node_type",
          "valid_time",
          "tax_number",
          "is_insurance",
          "disable_reason",
          "price_type",
          "unit_price",
          "based_on_price",
          "further_price",
          "first_measure",
          "is_enable",
        ];
        const data = {
          ids: this.orderIdNums,
          export_fields: filtersData,
        };
        CarrierUtilExport(data).then((res) => {
          if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            let aDom = document.createElement("a");
            aDom.href = this.reqUrl;
            aDom.click();
          }
        });
      } else {
        this.reqUrl = "javascript:;";
        this.$message({
          type: "warning",
          message: "请选择你要导出的数据！",
        });
        return false;
      }
    },
    //批量禁用操作
    BatchdisableClickFn() {
      if (this.orderIdNums.length > 0) {
        this.dialogVisibleDisable = true;
      } else {
        this.$message({
          message: "至少选择一条线路禁用",
          type: "warning",
        });
      }
    },
    handleCloseDisable() {
      this.dialogVisibleDisable = false;
    },
    submitFormDisableClickFn() {
      const data = {
        ids: this.orderIdNums,
        reason: this.ruleFormDisable.Reasondisabling,
      };
      CarrierUtilDisable(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "禁用成功",
            type: "success",
          });
          this.dialogVisibleDisable = false;
          this.CarrierUtilListFn(this.pageNum, this.pageSize);
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //批量启用操作
    BatchenableClickFn() {
      const data = {
        ids: this.orderIdNums,
      };
      if (this.orderIdNums.length > 0) {
        CarrierUtilEnable(data).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "启用成功",
              type: "success",
            });
            this.CarrierUtilListFn(this.pageNum, this.pageSize);
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "至少选择一条线路启用",
          type: "warning",
        });
      }
    },
    //批量删除操作
    DeleteClickFn() {
      const data = {
        ids: this.orderIdNums,
      };
      if (this.orderIdNums.length > 0) {
        this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            CarrierUtilDelete(data).then((res) => {
              if (res.code === 10000) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.CarrierUtilListFn(this.pageNum, this.pageSize);
              } else {
                this.$message({
                  message: res.message,
                  type: "warning",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message({
          message: "至少选择一条线路删除",
          type: "warning",
        });
      }
    },
    //新增路线操作
    AddGPSClickFn() {
      this.dialogVisible = true;
    },
    //新增函数弹出框 关闭操作
    handleClose() {
      this.dialogVisible = false;
    },
    //新增弹出框保存按钮操作
    submitForm() {
      const data = {
        from_region_id:
          this.ruleForm.getType === "1" || this.ruleForm.getType === "4"
            ? this.ruleForm.Regionalscope.toString()
            : this.ruleForm.placedeparture.toString(),
        to_region_id:
          this.ruleForm.getType === "1" || this.ruleForm.getType === "4"
            ? ""
            : this.ruleForm.destination.toString(),
        carrier_id: this.ruleForm.Carrier,
        tax_number: this.ruleForm.Taxpoint,
        node_type: this.ruleForm.getType,
        is_insurance: this.ruleForm.Insurance,
        billing_way_id: "",
        valid_time: (this.ruleForm.prescription * 60).toString(),
        price: {
          price_type: this.ruleForm.offer,
          unit_price:
            this.ruleForm.offer === "0"
              ? (this.ruleForm.pracenumber * 1).toString()
              : "0",
          based_on_price:
            this.ruleForm.offer === "1"
              ? (this.ruleForm.Firstprice * 1).toString()
              : "0",
          further_price:
            this.ruleForm.offer === "1"
              ? (this.ruleForm.Continuationprice * 1).toString()
              : "0",
          first_measure:
            this.ruleForm.offer === "1"
              ? (this.ruleForm.firstmeasure * 1).toString()
              : "0",
        },
      };
      CarrierUtilCreate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          (this.ruleForm.getType = "1"),
            (this.ruleForm.Carrier = ""),
            (this.ruleForm.placedeparture = ""),
            (this.ruleForm.destination = ""),
            (this.ruleForm.Regionalscope = ""),
            (this.ruleForm.prescription = ""),
            (this.ruleForm.Taxpoint = ""),
            (this.ruleForm.offer = "1"),
            (this.ruleForm.Insurance = ""),
            (this.ruleForm.BillingID = ""),
            (this.ruleForm.pracenumber = ""),
            (this.ruleForm.firstmeasure = ""),
            (this.ruleForm.Firstprice = ""),
            (this.ruleForm.Continuationprice = ""),
            (this.dialogVisible = false);
          this.CarrierUtilListFn(this.pageNum, this.pageSize);
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //详情按钮操作
    DetailClickFn(res) {
      this.dialogVisibleDetail = true;
      this.detailId = res.id;
      const data = {
        id: res.id.toString(),
      };
      CarrierUtilDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDetail.getType = res.data.node_type;
          this.ruleFormDetail.Carrier = res.data.carrier_id.toString();
          this.ruleFormDetail.placedeparture = res.data.from_region;
          this.ruleFormDetail.destination = res.data.to_region;
          this.ruleFormDetail.Regionalscope = res.data.from_region;
          this.ruleFormDetail.prescription = res.data.valid_time / 60;
          this.ruleFormDetail.Taxpoint = res.data.tax_number;
          this.ruleFormDetail.offer = res.data.price_type;
          this.ruleFormDetail.Insurance = res.data.is_insurance;
          this.ruleFormDetail.BillingID = res.data.billing_way_id;
          this.ruleFormDetail.pracenumber = res.data.unit_price / 1;
          this.ruleFormDetail.firstmeasure = res.data.first_measure / 1;
          this.ruleFormDetail.Firstprice = res.data.based_on_price / 1;
          this.ruleFormDetail.Continuationprice = res.data.further_price / 1;
        }
      });
    },
    //详情弹出框关闭按钮操作
    handleCloseDetail() {
      this.dialogVisibleDetail = false;
    },
    //编辑显示按钮操作
    EditClickFn(res) {
      this.dialogVisibleEdit = true;
      this.detailId = res.id;
      const data = {
        id: res.id.toString(),
      };
      CarrierUtilDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormEdit.getType = res.data.node_type;
          this.ruleFormEdit.Carrier = res.data.carrier_id.toString();
          this.ruleFormEdit.placedeparture = res.data.from_region;
          this.ruleFormEdit.destination = res.data.to_region;
          this.ruleFormEdit.Regionalscope = res.data.from_region;
          this.ruleFormEdit.prescription = res.data.valid_time / 60;
          this.ruleFormEdit.Taxpoint = res.data.tax_number;
          this.ruleFormEdit.offer = res.data.price_type;
          this.ruleFormEdit.Insurance = res.data.is_insurance;
          this.ruleFormEdit.BillingID = res.data.billing_way_id;
          this.ruleFormEdit.pracenumber = res.data.unit_price / 1;
          this.ruleFormEdit.firstmeasure = res.data.first_measure / 1;
          this.ruleFormEdit.Firstprice = res.data.based_on_price / 1;
          this.ruleFormEdit.Continuationprice = res.data.further_price / 1;
          this.changeOfferClickFn(res.data.price_type);
          this.changeClickFn(res.data.node_type);
        }
      });
    },
    //编辑关闭按钮操作
    handleCloseEdit() {
      this.dialogVisibleEdit = false;
    },
    //编辑弹出框保存按钮操作
    submitFormEditClickFn() {
      const data = {
        id: this.detailId,
        from_region_id:
          this.ruleFormEdit.getType === "1" || this.ruleFormEdit.getType === "4"
            ? this.ruleFormEdit.Regionalscope.toString()
            : this.ruleFormEdit.placedeparture.toString(),
        to_region_id:
          this.ruleFormEdit.getType === "1" || this.ruleFormEdit.getType === "4"
            ? ""
            : this.ruleFormEdit.destination.toString(),
        carrier_id: this.ruleFormEdit.Carrier.toString(),
        tax_number: this.ruleFormEdit.Taxpoint,
        node_type: this.ruleFormEdit.getType,
        is_insurance: this.ruleFormEdit.Insurance,
        billing_way_id: "",
        valid_time: (this.ruleFormEdit.prescription * 60).toString(),
        price: {
          price_type: this.ruleFormEdit.offer,
          unit_price:
            this.ruleFormEdit.offer === "0"
              ? (this.ruleFormEdit.pracenumber * 1).toString()
              : "0",
          based_on_price:
            this.ruleFormEdit.offer === "1"
              ? (this.ruleFormEdit.Firstprice * 1).toString()
              : "0",
          further_price:
            this.ruleFormEdit.offer === "1"
              ? (this.ruleFormEdit.Continuationprice * 1).toString()
              : "0",
          first_measure:
            this.ruleFormEdit.offer === "1"
              ? (this.ruleFormEdit.firstmeasure * 1).toString()
              : "0",
        },
      };
      CarrierUtilUpdate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          this.dialogVisibleEdit = false;
          this.CarrierUtilListFn(this.pageNum, this.pageSize);
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //新增弹出框 重置按钮操作
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //单个删除按钮操作
    deleteClickFn(val) {
      this.deleteId.push(Number(val.id));
      const data = {
        ids: this.deleteId,
      };
      CarrierUtilDelete(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.CarrierUtilListFn(this.pageNum, this.pageSize);
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //翻页函数
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.CarrierUtilListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.CarrierUtilListFn(this.pageNum, this.pageSize);
    },
    //列表API函数
    CarrierUtilListFn(pageNumval, pageSizeval) {
      const data = {
        token: getToken("Cookie"),
        carrier_id: this.orderSearch.Carrier,
        to_region_id: this.orderSearch.destination.toString(),
        from_region_id: this.orderSearch.placedeparture.toString(),
        node_type: this.orderSearch.getType,
        page: pageNumval,
        page_size: pageSizeval,
      };
      CarrierUtilList(data).then((res) => {
        // console.log(res.data.list, 11111);
        if (res.code === 10000 && res.data.list != null) {
          this.tableData = res.data.list;
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
          this.flagShow = false;
          // console.log(this.flagShow);
        } else {
          this.flagShow = true;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-form--inline .el-form-item {
  width: 290px !important;
}
/deep/.el-form--inline .el-form-item__content {
  width: 220px !important;
}
/deep/.el-row {
  padding: 0px !important;
  margin: 0px !important;
}
/deep/.menu_content {
  min-height: auto !important;
  padding-bottom: 0px !important;
}
/deep/.item_list {
  width: 200px;
  float: left;
}
.danjia {
  width: 251px;
  float: left;
}
/deep/.danjia .el-form-item__label {
  width: 50px !important;
}
/deep/.danjia .el-form-item__content {
  margin-left: 50px !important;
}
/deep/.baoxian {
  clear: both !important;
}
.KG_box {
  width: 390px;
  float: left;
}
/deep/.KG_box .el-form-item {
  width: 125px !important;
  float: left !important;
}
/deep/.KG_box .el-form-item__label {
  width: 50px !important;
}
/deep/.KG_box .el-form-item__content {
  width: 80px !important;
  margin-left: 50px !important;
}
.left .improtOut a {
  color: #409eff;
}
.left .improtOut a:hover {
  color: #fff;
}
.left .improtOut:hover a {
  color: #fff;
}
.download_button a {
  color: #fff;
}
.download_button a:hover {
  color: #fff;
}
.download_button:hover a {
  color: #fff;
}
.capacitymanagement_box {
  padding: 5px;
  background-color: #fff;
  height: calc(100vh - 25vh);
  .orderHeader {
    margin-top: 20px;
    border-bottom: 5px solid #e8f1f7;
  }
}
// 中间信息
.body_center {
  width: 98%;
  height: 400px;
  // border: 1px solid #dddddd;
  margin: 10px auto;

  .first_step {
    width: 98%;
    height: 90px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .second_step {
    width: 98%;
    min-height: 62px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
    overflow: hidden;
  }

  .third_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .four_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
}
</style>